<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>2. SQL 与 NoSQL | 被删的前端游乐场</title>
    <meta name="description" content="Just playing around">
    
    
    <link rel="preload" href="/front-end-playground/assets/css/0.styles.a683ed26.css" as="style"><link rel="preload" href="/front-end-playground/assets/js/app.e5cf4092.js" as="script"><link rel="preload" href="/front-end-playground/assets/js/3.c853767c.js" as="script"><link rel="preload" href="/front-end-playground/assets/js/2.eed49fdd.js" as="script"><link rel="preload" href="/front-end-playground/assets/js/10.7459be47.js" as="script">
    <link rel="stylesheet" href="/front-end-playground/assets/css/0.styles.a683ed26.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/front-end-playground/" class="home-link router-link-active"><!----> <span class="site-name">被删的前端游乐场</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/front-end-playground/" class="nav-link">概述</a></div><div class="nav-item"><a href="/front-end-playground/front-end-basic/" class="nav-link">前端基础</a></div><div class="nav-item"><a href="/front-end-playground/vue/" class="nav-link">Vue学习</a></div><div class="nav-item"><a href="/front-end-playground/wxapp/" class="nav-link">小程序学习</a></div><div class="nav-item"><a href="/front-end-playground/front-end-others/" class="nav-link">百家齐放</a></div><div class="nav-item"><a href="/front-end-playground/front-end-addon/" class="nav-link router-link-active">前端的进击</a></div><div class="nav-item"><a href="/front-end-playground/faq.html" class="nav-link">FAQ</a></div> <a href="https://github.com/godbasin/front-end-playground" target="_blank" rel="noopener noreferrer" class="repo-link">
    Github
    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/front-end-playground/" class="nav-link">概述</a></div><div class="nav-item"><a href="/front-end-playground/front-end-basic/" class="nav-link">前端基础</a></div><div class="nav-item"><a href="/front-end-playground/vue/" class="nav-link">Vue学习</a></div><div class="nav-item"><a href="/front-end-playground/wxapp/" class="nav-link">小程序学习</a></div><div class="nav-item"><a href="/front-end-playground/front-end-others/" class="nav-link">百家齐放</a></div><div class="nav-item"><a href="/front-end-playground/front-end-addon/" class="nav-link router-link-active">前端的进击</a></div><div class="nav-item"><a href="/front-end-playground/faq.html" class="nav-link">FAQ</a></div> <a href="https://github.com/godbasin/front-end-playground" target="_blank" rel="noopener noreferrer" class="repo-link">
    Github
    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav>  <ul class="sidebar-links"><li><section class="sidebar-group collapsable depth-0" style="padding-top:;"><!----> <p class="sidebar-heading"><span>不止单线程</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0" style="padding-top:;"><!----> <p class="sidebar-heading"><span>简单算法之 js 实现</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0" style="padding-top:10px;"><div class="kitty-main" data-v-0cd75e06><span class="stand" data-v-0cd75e06></span> <div class="cat" data-v-0cd75e06><div class="body" data-v-0cd75e06></div> <div class="head" data-v-0cd75e06><div class="ear" data-v-0cd75e06></div> <div class="ear" data-v-0cd75e06></div></div> <div class="face" data-v-0cd75e06><div class="nose" data-v-0cd75e06></div> <div class="whisker-container" data-v-0cd75e06><div class="whisker" data-v-0cd75e06></div> <div class="whisker" data-v-0cd75e06></div></div> <div class="whisker-container" data-v-0cd75e06><div class="whisker" data-v-0cd75e06></div> <div class="whisker" data-v-0cd75e06></div></div></div> <div class="tail-container" data-v-0cd75e06><div class="tail" data-v-0cd75e06><div class="tail" data-v-0cd75e06><div class="tail" data-v-0cd75e06><div class="tail" data-v-0cd75e06><div class="tail" data-v-0cd75e06><div class="tail" data-v-0cd75e06><div class="tail" data-v-0cd75e06></div></div></div></div></div></div></div></div></div></div> <p class="sidebar-heading open"><span>不止纯前端</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/front-end-playground/front-end-addon/more-than-front-end/1-learning-database.html" class="sidebar-link">1. 认识数据库</a></li><li><a href="/front-end-playground/front-end-addon/more-than-front-end/2-sql-and-nosql.html" class="active sidebar-link">2. SQL 与 NoSQL</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/front-end-playground/front-end-addon/more-than-front-end/2-sql-and-nosql.html#关系型数据库" class="sidebar-link">关系型数据库</a></li><li class="sidebar-sub-header"><a href="/front-end-playground/front-end-addon/more-than-front-end/2-sql-and-nosql.html#非关系型数据库" class="sidebar-link">非关系型数据库</a></li><li class="sidebar-sub-header"><a href="/front-end-playground/front-end-addon/more-than-front-end/2-sql-and-nosql.html#关系型数据库与-nosql" class="sidebar-link">关系型数据库与 NoSQL</a></li><li class="sidebar-sub-header"><a href="/front-end-playground/front-end-addon/more-than-front-end/2-sql-and-nosql.html#参考" class="sidebar-link">参考</a></li></ul></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><p>该系列用于记录在工作中的一些技能补全。什么技能？大概是前端所缺的很多的知识和技术吧。本节我们一起来了解下关系型数据库与非关系型数据库。</p> <h1 id="sql-与-nosql"><a href="#sql-与-nosql" aria-hidden="true" class="header-anchor">#</a> SQL 与 NoSQL</h1> <p>上一节我们认识了数据库，了解了数据库事务是什么，索引是如何提升数据库性能的，现在我们来学习下大家常说的一些数据库，MySQL、mongoDB、kv 等等这些又有什么区别。本文中，SQL 与 NoSQL 代表关系型数据库与非关系型数据库，当然，SQL ≠ 关系型数据库，这里用作简写。</p> <h2 id="关系型数据库"><a href="#关系型数据库" aria-hidden="true" class="header-anchor">#</a> 关系型数据库</h2> <h3 id="什么是关系型数据库"><a href="#什么是关系型数据库" aria-hidden="true" class="header-anchor">#</a> 什么是关系型数据库</h3> <p>**关系数据库（Relational database），是创建在关系模型基础上的数据库，借助于集合代数等数学概念和方法来处理数据库中的数据。**现实世界中的各种实体以及实体之间的各种联系均用关系模型来表示。</p> <ul><li><strong>数据库</strong>：包括一个或多个表</li> <li><strong>表（关系 Relation）</strong>：是以列和行的形式组织起来的数据的集合</li> <li><strong>列（属性 Attribute）</strong>：在数据库中经常被称为字段</li> <li><strong>行（值组 Tuple）</strong>：在数据库中经常被称为记录</li></ul> <p>我们可以理解为：系型数据库，是指采用了关系模型来组织数据的数据库。</p> <p>例如，可能有一个有关作者信息的名为 authors 的表（关系 Relation）。每列（值组 Tuple）都包含特定类型的信息，如作者的姓氏。每行（属性 Attribute）都包含有关特定作者的所有信息：姓、名、住址等等。</p> <p><strong>在关系型数据库当中一个表就是一个关系，一个关系数据库可以包含多个表。</strong></p> <p>关系型数据库的主要代表：SQL Server，Oracle，MySQL，PostgreSQL。</p> <h3 id="关系型数据库优点"><a href="#关系型数据库优点" aria-hidden="true" class="header-anchor">#</a> 关系型数据库优点</h3> <ul><li><strong>事务一致性</strong>：通过事务处理保持数据的一致性</li> <li><strong>复杂查询</strong>：支持 SQL，可以进行 JOIN 等复杂查询</li> <li><strong>容易理解</strong>：二维表结构是非常贴近逻辑世界的一个概念，关系模型相对网状、层次等其他模型来说更容易理解</li> <li><strong>使用方便</strong>：通用的 SQL 语言使得操作关系型数据库非常方便</li> <li><strong>易于维护</strong>：丰富的完整性(实体完整性、参照完整性和用户定义的完整性)大大减低了数据冗余和数据不一致的概率</li></ul> <h3 id="关系型数据库缺点"><a href="#关系型数据库缺点" aria-hidden="true" class="header-anchor">#</a> 关系型数据库缺点</h3> <ul><li><strong>读写性能</strong>：在数据量达到一定规模时，由于关系型数据库的系统逻辑非常复杂，为了维护一致性，使得其非常容易发生死锁等的并发问题，所以导致其读写速度下滑非常严重</li> <li><strong>表结构更新</strong>：表结构可以在被定义之后更新，但是如果有比较大的结构变更的话就会变得比较复杂</li> <li><strong>高并发</strong>：网站的用户并发性非常高，往往达到每秒上万次读写请求，对于传统关系型数据库来说，硬盘 I/O 是一个很大的瓶颈</li> <li><strong>海量数据</strong>：对于关系型数据库来说，在一张包含海量数据的表中查询，效率是非常低的</li></ul> <h2 id="非关系型数据库"><a href="#非关系型数据库" aria-hidden="true" class="header-anchor">#</a> 非关系型数据库</h2> <h3 id="什么是非关系型数据库"><a href="#什么是非关系型数据库" aria-hidden="true" class="header-anchor">#</a> 什么是非关系型数据库</h3> <p>非关系型数据库（NoSQL）是对不同于传统的关系数据库的数据库管理系统的统称。</p> <p>当代典型的关系数据库在一些数据敏感的应用中表现了糟糕的性能，例如为巨量文档创建索引、高流量网站的网页服务，以及发送流式媒体。关系型数据库的典型实现主要被调整用于执行规模小而读写频繁，或者大批量极少写访问的事务。</p> <p>NoSQL 的结构通常提供弱一致性的保证，如最终一致性，或交易仅限于单个的数据项。</p> <p>NoSQL 提出另一种理念，例如，以键值对存储，且结构不固定，每一个元组可以有不一样的字段，每个元组可以根据需要增加一些自己的键值对，这样就不会局限于固定的结构，可以减少一些时间和空间的开销。</p> <p>**NoSQL 与 SQL 存在许多显著的不同点，其中最重要的是 NoSQL 不使用 SQL 作为查询语言。**其数据存储可以不需要固定的表格模式，也经常会避免使用 SQL 的 JOIN 操作，一般有水平可扩展性的特征。</p> <p>非关系型数据库包括：</p> <ul><li>临时性键值存储：memcached、Redis</li> <li>永久性键值存储：ROMA、Redis</li> <li>面向文档的数据库：MongoDB、CouchDB</li> <li>面向列的数据库：Cassandra、HBase
<blockquote><p>主要代表：MongoDB，Redis，CouchDB</p></blockquote></li></ul> <h3 id="非关系型数据库分类"><a href="#非关系型数据库分类" aria-hidden="true" class="header-anchor">#</a> 非关系型数据库分类</h3> <p>由于非关系型数据库本身天然的多样性，以及出现的时间较短，相比关系型数据库，非关系型数据库非常多，并且大部分都是开源的。</p> <p>非关系型数据库严格上不是一种数据库，应该是一种数据结构化存储方法的集合。依据结构化方法以及应用场合的不同，主要分为以下几类：</p> <ul><li><strong>面向高性能并发读写的 key-value 数据库</strong>：key-value 数据库的主要特点即使具有极高的并发读写性能，Redis，Tokyo Cabinet，Flare 就是这类的代表</li> <li><strong>面向海量数据访问的面向文档数据库</strong>：这类数据库的特点是，可以在海量的数据中快速的查询数据，典型代表为 MongoDB 以及 CouchDB</li> <li><strong>面向可扩展性的分布式数据库</strong>：这类数据库想解决的问题就是传统数据库存在可扩展性上的缺陷，这类数据库可以适应数据量的增加以及数据结构的变化</li></ul> <h3 id="非关系型数据库优点"><a href="#非关系型数据库优点" aria-hidden="true" class="header-anchor">#</a> 非关系型数据库优点</h3> <p>非关系型数据库的出现，多是源于关系型数据库的性能不足，故非关系型数据库的优点也很明显：</p> <ul><li><strong>读写性能</strong>：无需经过 SQL 层的解析，读写性能很高。主要例子有 Redis，由于其逻辑简单，而且纯内存操作，使得其性能非常出色，单节点每秒可以处理超过 10 万次读写操作</li> <li><strong>简单的扩展</strong>：基于键值对，数据没有耦合性，容易扩展。典型例子是 Cassandra，由于其架构是类似于经典的 P2P，所以能通过轻松地添加新的节点来扩展这个集群</li> <li><strong>存储格式多</strong>：支持 key-value 形式、文档形式、图片形式，而关系型数据库则只支持基础类型</li> <li><strong>低廉的成本</strong>：这是大多数分布式数据库共有的特点，因为主要都是开源软件，没有昂贵的 License 成本</li></ul> <h3 id="非关系型数据库缺点"><a href="#非关系型数据库缺点" aria-hidden="true" class="header-anchor">#</a> 非关系型数据库缺点</h3> <ul><li><strong>不提供对 SQL 的支持</strong>：如果不支持 SQL 这样的工业标准，将会对用户产生一定的学习和应用迁移成本</li> <li><strong>支持的特性不够丰富</strong>：现有产品所提供的功能都比较有限，大多数 NoSQL 数据库都不支持事务，也不像 MS SQL Server 和 Oracle 那样能提供各种附加功能，比如 BI 和报表等</li> <li><strong>现有产品的不够成熟</strong>：大多数产品都还处于初创期，和关系型数据库几十年的完善不可同日而语</li></ul> <h2 id="关系型数据库与-nosql"><a href="#关系型数据库与-nosql" aria-hidden="true" class="header-anchor">#</a> 关系型数据库与 NoSQL</h2> <h3 id="nosql-使用场景"><a href="#nosql-使用场景" aria-hidden="true" class="header-anchor">#</a> NoSQL 使用场景</h3> <p>并不是任何场景，NoSQL 都要优于关系型数据库。NoSQL 使用场景常见如下：</p> <p><strong>数据库表 schema 经常变化</strong>
比如在线商城，维护产品的属性经常要增加字段，这就意味着 ORMapping 层的代码和配置要改，如果该表的数据量过百万，新增字段会带来额外开销（重建索引等）。</p> <p><strong>数据库表字段是复杂数据类型</strong>
对于复杂数据类型，比如 SQL Sever 提供了可扩展性的支持，像 xml 类型的字段。DB 层对 xml 字段很难建高效索引，应用层又要做从字符流到 dom 的解析转换。NoSQL 以 json 方式存储，提供了原生态的支持，在效率方便远远高于传统关系型数据库。</p> <p><strong>高并发数据库请求</strong>
此类应用常见于 web2.0 的网站，很多应用对于数据一致性要求很低，而关系型数据库的事务以及大表 JOIN 反而成了”性能杀手”。</p> <p><strong>海量数据的分布式存储</strong>
海量数据的存储如果选用大型商用数据，如 Oracle，那么整个解决方案的成本是非常高的，要花很多钱在软硬件上。NoSQL 分布式存储，可以部署在廉价的硬件上，是一个性价比非常高的解决方案。</p> <h3 id="nosql-和关系数据库结合"><a href="#nosql-和关系数据库结合" aria-hidden="true" class="header-anchor">#</a> NoSQL 和关系数据库结合</h3> <p><strong>一般把 NoSQL 和关系数据库进行结合使用，各取所长，需要使用关系特性的时候我们使用关系数据库，需要使用 NoSQL 特性的时候我们使用 NoSQL 数据库，各得其所</strong>。NoSQL 数据库是关系数据库在某些方面（性能，扩展）的一个弥补。</p> <p>举个简单的例子吧，比如用户评论的存储，评论大概有主键 id、评论的对象 aid、评论内容 content、用户 uid 等字段。我们能确定的是评论内容 content 肯定不会在数据库中用 where content=’’ 查询，评论内容也是一个大文本字段。那么我们可以把主键 id、评论对象 aid、用户 id 存储在数据库，评论内容存储在 NoSQL，这样数据库就节省了存储 content 占用的磁盘空间，从而节省大量 IO，对 content 也更容易做 Cache。</p> <p>另外，<strong>可使用 NoSQL 作为缓存服务器</strong>。MySQL + Memcached 的架构中，Memcached 这类内存缓存服务器缓存的数据大小受限于内存大小，如果用 NoSQL 来代替 Memcached 来缓存数据库的话，就可以不再受限于内存大小。虽然可能有少量的磁盘 IO 读写，可能比 Memcached 慢一点，但是完全可以用来缓存数据库的查询操作。</p> <h2 id="参考"><a href="#参考" aria-hidden="true" class="header-anchor">#</a> 参考</h2> <ul><li><a href="https://zh.wikipedia.org/wiki/SQL" target="_blank" rel="noopener noreferrer">维基百科-SQL<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li> <li><a href="https://zh.wikipedia.org/wiki/NoSQL" target="_blank" rel="noopener noreferrer">维基百科-NoSQL<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li> <li><a href="https://blog.csdn.net/xgf415/article/details/75370783" target="_blank" rel="noopener noreferrer">为什么使用 NoSQL：NoSQL 与 SQL 的区别<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li> <li><a href="https://blog.csdn.net/lijinqi1987/article/details/51823506" target="_blank" rel="noopener noreferrer">关系型数据库和非关系型数据库的特性以及各自的优缺点<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li> <li><a href="https://blog.csdn.net/oChangWen/article/details/53423301" target="_blank" rel="noopener noreferrer">关系型数据库和非关系型数据库区别、oracle 与 mysql 的区别<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul> <h1 id="结束语"><a href="#结束语" aria-hidden="true" class="header-anchor">#</a> 结束语</h1> <p>本节主要针对关系型数据库和非关系型数据库的特性和区别，由于在数据库相关的经验还很缺，大多数的内容也都是摘抄整理来的。<br>
对于数据库的理解，还有后台存储的设计，以及在不同场景下的方案使用，或许还差的有些远呢。</p></div> <!----> <footer class="page-edit"><div class="edit-link"><a href="https://github.com/godbasin/front-end-playground/edit/sourcecode/docs/front-end-addon/more-than-front-end/2-sql-and-nosql.md" target="_blank" rel="noopener noreferrer">帮阿猪改善此页面！</a> <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></div> <!----> <blockquote>部分文章中使用了一些网站的截图，如果涉及侵权，请告诉我删一下谢谢~</blockquote> <div style="margin-top:30px;"><div class="el-row" style="margin-left:-10px;margin-right:-10px;"><div class="el-col el-col-24 el-col-sm-0 el-col-md-2 el-col-lg-4" style="padding-left:10px;padding-right:10px;display:block;"><div style="width:1px;height:1px;"></div></div> <div class="el-col el-col-24 el-col-sm-24 el-col-md-18 el-col-lg-16" style="padding-left:10px;padding-right:10px;"><div class="el-card box-card is-always-shadow"><div class="el-card__header"><div class="clearfix"><span>温馨提示喵</span></div></div><div class="el-card__body"> <div class="el-row" style="margin-left:-10px;margin-right:-10px;"><div class="el-col el-col-24 el-col-xs-24 el-col-sm-12" style="padding-left:10px;padding-right:10px;"><div class="el-image"><div class="image-slot"><img src="https://github-imglib-1255459943.cos.ap-chengdu.myqcloud.com/assets/img/loading.gif" style="width:100%;"></div><!----></div></div> <div class="el-col el-col-24 el-col-xs-24 el-col-sm-12" style="padding-left:10px;padding-right:10px;"><div class="copyright-text"><div>本文版权归作者所有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。</div> <div>出处：被删的前端游乐场</div> <div>作者：<a href="https://github.com/godbasin" target="_blank">被删</a></div></div></div></div></div></div></div></div></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
        ←
        <a href="/front-end-playground/front-end-addon/more-than-front-end/1-learning-database.html" class="prev">
          1. 认识数据库
        </a></span> <!----></p></div>  <div class="gitalk-container theme-default-content"><div id="gitalk-container" class="content"></div></div></main> <div id="kitty-container"><span><div role="tooltip" id="el-popover-6052" aria-hidden="true" class="el-popover el-popper" style="width:undefinedpx;display:none;"><!----><img src="https://github-imglib-1255459943.cos.ap-chengdu.myqcloud.com/2code2.jpg" class="image"> <div class="text">牡羊猪的猫粮罐</div> </div><div id="kitty" style="background:url(https://github-imglib-1255459943.cos.ap-chengdu.myqcloud.com/assets/img/kitty1.svg);"></div></span> <div class="el-dialog__wrapper" style="display:none;"><div role="dialog" aria-modal="true" aria-label="牡羊猪是这样渐渐胖成猪的喵（点击图片可以切换噢）" class="el-dialog" style="margin-top:15vh;"><div class="el-dialog__header"><span class="el-dialog__title">牡羊猪是这样渐渐胖成猪的喵（点击图片可以切换噢）</span><button type="button" aria-label="Close" class="el-dialog__headerbtn"><i class="el-dialog__close el-icon el-icon-close"></i></button></div><!----><!----></div></div></div></div><div class="global-ui"></div></div>
    <script src="/front-end-playground/assets/js/app.e5cf4092.js" defer></script><script src="/front-end-playground/assets/js/3.c853767c.js" defer></script><script src="/front-end-playground/assets/js/2.eed49fdd.js" defer></script><script src="/front-end-playground/assets/js/10.7459be47.js" defer></script>
  </body>
</html>
